<template>
	<view class="container" @tap="onClickBgView" @touchmove.stop.prevent="() => { }">
		<view @tap.stop="onStopClick" class="erji">
			<view
				style="background-color: white;height: 60rpx;width: 100vw;display: flex;justify-content: space-between;padding-top: 20rpx;">
				<view style="background-color: transparent;">
					<text style="margin-left: 40rpx;font-size: 34rpx;">{{title}}</text>
					<text v-if="title.length > 0" style="margin-left: 10rpx;font-size: 26rpx;color: #999;">多选</text>
				</view>
				<image src="https://mcdn.chatgk.com/xcx/static/images/chancePageImg/gb.png"
					style="height: 60rpx;width: 60rpx;margin-right: 26rpx;" @tap="close"></image>
			</view>
			<view class="flex-row tree" :style="'max-height:' + maxHeight + 'vh;'" style="background-color: #ffffff;"
				v-if="!data.majorEnrollTypes">
				<view v-if="qufenzhaunben" class="zhuanben" :style="'max-height:' + maxHeight + 'vh;'"
					style="background-color: #fff;">

					<view :class="profession==0?'slectzhuanben':''" style="display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20rpx;
					background-color: #fff
					" @tap="onClickSwictItem(0)">
						本科
					</view>
					<view :class="profession==1?'slectzhuanben':''" style="display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20rpx;
					background-color: #fff
					" @tap="onClickSwictItem(1)">
						专科
					</view>

				</view>

				<scroll-view class="sortList-left-list" style="background-color: #f8f8f8; width: 250rpx;"
					:style="'max-height:' + maxHeight + 'vh;'" scroll-y="true">

					<view class="flex-column sortList-left">
						<text class="text-group" style="padding: 15rpx 0;" :class="selGroupIndex == -1 ? 'select':''"
							@tap="onClickGroupCell({}, -1)">不限</text>
						<view class="flex-row" v-for="(group, index) in majorData" :key="group.level2">
							<text class="text-group" :class="selGroupIndex == index ? 'select':''"
								@tap="onClickGroupCell(group, index)">{{group.name + '(' + group.majors.length + ')'}}</text>
						</view>
					</view>
				</scroll-view>

				<scroll-view style="background-color: #fff; width: 100%;" :style="'max-height:' + maxHeight + 'vh;'"
					scroll-y="true">
					<view class="flex-column sortList-right">

						<view @tap.stop="onClickAllValueCell" class="flex-row view-list-value">
							<text class="text-value" :class="getAllCellSelectClass()">全部</text>
							<image style="width: 40rpx; height: 40rpx;margin-top: 15rpx; margin-right: 40rpx;"
								:src="'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_' + (isAllSelect ? 's.png':'n.png')"
								mode="aspectFit"></image>
						</view>

						<view v-if="selGroupIndex >= 0 && majorData[selGroupIndex]" class="flex-row view-list-value"
							v-for="(item, index) in majorData[selGroupIndex].majors" :key="item.code"
							@tap="onClickValueCell(item, index)">
							<text class="text-value" :class="getSelectClass(item)">{{item.name}}</text>
							<image style="width: 40rpx; height: 40rpx;margin-top: 15rpx; margin-right: 40rpx;"
								:src="'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_' + (getSelectState(item) ? 's.png':'n.png')"
								mode="aspectFit" @tap.stop="onClickValueCell(item, index)"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="" v-if="data.majorEnrollTypes">
				<view class="">
					<view class="" style="display: flex;">
						<text class="title background-color-F8F8F8" style="padding-left: 10rpx;">高级筛选</text>
						<text
							style="	color: #6c6c6c;font-size: 20rpx;font-weight: bold;margin-top: 48rpx;margin-bottom: 20rpx;margin-left: 5rpx;">(多选)</text>
					</view>
					<view class="container-items">
						<view v-for="(item,index) in gaojidata.majorEnrollTypes" :key="index">
							<button class="item-n" :class="classindex(item,index)"
								@tap.stop="onClickItem(item,index)">{{item}}</button>
						</view>
					</view>
				</view>
				<view class="">
					<view class="" style="display: flex;">
						<text class="title background-color-F8F8F8" style="padding-left: 10rpx;">更多筛选</text>
						<text
							style="	color: #6c6c6c;font-size: 20rpx;font-weight: bold;margin-top: 48rpx;margin-bottom: 20rpx;margin-left: 5rpx;">(多选)</text>
					</view>
					<view class="container-items">
						<view v-for="(item,index) in gaojidata.majorNewly" :key='index'>
							<button class="item-n" :class="classindexx(item,index)"
								@tap.stop="onClickItems(item,index)">{{item}}</button>
						</view>
					</view>
				</view>

			</view>
			<view class="flex-row space-around container-button">
				<button class="button reset" @tap="onClickReset">清空</button>
				<button class="button ok" @tap="onClickStartFilter">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		array
	} from 'js-md5';
	import loginHomeVue from '../../pages/login/login-home.vue';
	export default {
		props: {
			xueli: {
				type: String,
				default: "本科"
			},
			data: {
				type: Object,
				default: {}
			},
			majorsBK: {
				type: Array,
				default: []
			},
			majorsZK: {
				type: Array,
				default: []
			},
			maxHeight: {
				type: Number,
				default: 55.5
			},
			majorlist: {
				type: Array,
				default: []
			},
			qufenzhaunben: {
				type: Boolean,
				default: true
			},
			deleteAll: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				majorData: [],
				selectData: {},
				selectDate: {},
				selGroupIndex: -1,
				selZhuanIndex: -1, // 选中专科的数据
				selBenIndex: -1, // 选中本科的数据
				selectarr: [],
				gaojidata: [],
				title: '专业库',
				seleindex: [],
				seleindexx: [],
				userInfo: getApp().globalData.userInfo,
				batchPickers: getApp().globalData.batchPickers,
				isUndergraduate: true,
				isSelUndergraduate: true,
				allStatus: true,
				profession: 0,
				selectBen: false,
			}
		},
		watch: {
			// xueli: {
			// 	handler(newVal) {
			// 		this.profession = newVal == '专科' ? 1 : 0
			// 		// if(this.userInfo.b)
			// 		// this.isSelUndergraduate = newVal == '本科'
			// 	},
			// 	immediate: true,
			// 	deep: true
			// },
			// selectData: {
			// 	handler(newVal) {
			// 		const keys = Object.keys(newVal)
			// 		if (keys.length > 0) {
			// 			this.selGroupIndex = Number(keys[keys.length - 1])
			// 		}
			// 	},
			// 	immediate: true,
			// 	deep: true
			// },
			// selGroupIndex: {
			// 	handler(newValue) {
			// 	},
			// 	immediate: true,
			// 	deep: true
			// },
			data: {
				handler(newVal) {
					if (uni.getStorageSync('selectData')) { // 判断是否有数据，没有回显给之前的数据
						this.selectData = uni.getStorageSync('selectData')
						// this.selectData[this.selGroupIndex] = this.majorData[this.selGroupIndex]
					}

					if (newVal.majorEnrollTypes) {
						this.gaojidata = newVal
						this.title = ""
					} else {
						this.title = "专业库"
						this.majorData = newVal
						// this.majorData[this.selGroupIndex] = newVal
						let count
						if (!!this.batchPickers) {
							count = this.batchPickers.length
						} else {
							count = 0
						}
						if (count > 1) {

							if (count > 2) {
								// this.profession = 0
								this.selGroupIndex = this.selBenIndex
								this.$forceUpdate()

								// this.isUndergraduate = this.userInfo.score >= this.batchPickers[count - 2].score
							} else {
								// this.profession = this.userInfo.batch == '1段' ? 0 : 1
								// 判断选中的状态
								this.selGroupIndex = this.selZhuanIndex
								this.$forceUpdate()

								// this.isUndergraduate = this.userInfo.score >= this.batchPickers[0].score
							}
						}
					}
				},
				immediate: true
			},
			deleteAll(newValue) {
				if (newValue) {}
			}
		},
		onLoad() {},

		computed: {
			isAllSelect() {

				if (this.profession == 0) {
					if (this.selGroupIndex == -1) {
						return true
					} else if (this.majorData[this.selGroupIndex] == undefined || this.selectData[this.selGroupIndex] ==
						undefined) {
						return false
					} else {
						return this.selGroupIndex != -1 ? this.majorData[this.selGroupIndex].majors.length == this
							.selectData[
								this.selGroupIndex].length : false
					}
				} else {
					if (this.selGroupIndex == -1) {
						return true
					} else if (this.majorData[this.selGroupIndex] == undefined || this.selectDate[this.selZhuanIndex] ==
						undefined) {
						return false
					} else {
						return this.selZhuanIndex != -1 ? this.majorData[this.selZhuanIndex].majors.length == this
							.selectDate[this.selZhuanIndex].length : false
					}
				}
			}
		},
		methods: {
			// 改变数据信息
			updateDateChange(val) {
				const selectDataList = this.selectData
				for (let key in selectDataList) {
					const dataValue = selectDataList[key]
					if (dataValue.length == 0) { // 判断下标中是否有空的数据，根据下标清空数据
						this.selectData[key] = val
						uni.setStorageSync('selectData', this.selectData)
					}
					dataValue.forEach(item => {
						val.forEach(value => {
							if (item.name == value.name) {
								this.selectData[key] = val
								// 保存之前先存储一次 修改之后的数据
								uni.setStorageSync('selectData', this.selectData)
							} else {}
						})
					})
				}

			},
			// 更改状态
			updateChange(index) {
				this.profession = index
				this.onClickSwictItem(index)
			},
			onClickSwictItem(index) {
				if (index == 0 && this.isUndergraduate) {
					// this.isSelUndergraduate = true
					this.profession = index
					this.selGroupIndex = this.selBenIndex
					this.majorData = this.majorsBK
					this.$forceUpdate()
				} else {
					// this.isSelUndergraduate = false
					this.profession = index
					this.selGroupIndex = this.selZhuanIndex // 保存专科的数据Id
					this.majorData = this.majorsZK
					this.$forceUpdate()

				}
			},
			onClickItem(item, index) {
				if (this.seleindex.some(i => i == item)) {
					this.seleindex = this.seleindex.filter(items => items != item);
				} else {
					this.seleindex.push(item)
				}
			},
			onClickItems(item, index) {
				if (this.seleindexx.some(i => i == item)) {
					this.seleindexx = this.seleindexx.filter(items => items != item);
				} else {
					this.seleindexx.push(item)
				}
			},
			classindex(item, index) {
				return this.seleindex.some(i => i == item) ? 'item-s' : ''
			},
			classindexx(item, index) {
				return this.seleindexx.some(i => i == item) ? 'item-s' : ''
			},
			close() {
				this.$emit('opensub')
			},
			// 获取筛选项选中样式
			getSelectState(item) {
				if (this.profession == 0) {
					if (!this.selectData[this.selGroupIndex]) {
						return false
					} else {
						return this.selectData[this.selGroupIndex].some(i => i.code == item.code) ? true : false
					}
				} else {
					if (!this.selectDate[this.selZhuanIndex]) {
						return false
					} else {
						return this.selectDate[this.selZhuanIndex].some(i => i.code == item.code) ? true : false
					}
				}

			},
			// 点击背景其他位置隐藏筛选
			onClickBgView() {
				this.$emit("onClickHideScreening")
			},
			// 点击组cell
			onClickGroupCell(group, index) {

				this.selGroupIndex = index
				if (index == -1) {
					// this.selectData = {}
				} else if (this.profession == 0) {
					this.selBenIndex = index
				} else {
					this.selZhuanIndex = index
				}
			},
			// 点击值Cell
			onClickValueCell(item, index) {

				if (this.profession == 0) {
					if (!this.selectData[this.selGroupIndex]) {
						this.selectData[this.selGroupIndex] = []
					}
					const findIndex = this.selectData[this.selGroupIndex].findIndex(i => i.code == item.code)
					if (findIndex > -1) {
						this.selectData[this.selGroupIndex].splice(findIndex, 1)
					} else {
						this.selectData[this.selGroupIndex].push(item)
					}
				} else {
					if (!this.selectDate[this.selZhuanIndex]) {
						this.selectDate[this.selZhuanIndex] = []
					}
					const findIndex = this.selectDate[this.selZhuanIndex].findIndex(i => i.code == item.code)
					if (findIndex > -1) {
						this.selectDate[this.selZhuanIndex].splice(findIndex, 1)
					} else {
						this.selectDate[this.selZhuanIndex].push(item)
					}
				}

			},
			// 点击全部按钮
			onClickAllValueCell() {

				if (this.profession == 0) {
					const isSelect = this.getAllCellSelectClass() == 'select'

					this.selectData[this.selGroupIndex] = [];
					if (!isSelect) {
						const groups = this.majorData[this.selGroupIndex]
						groups.majors.forEach(info => {

							this.selectData[this.selGroupIndex].push(info)
						})
					}
				} else {
					this.getZhuanClickChange()
				}

			},
			getZhuanClickChange() {
				const isSelect = this.getAllCellSelectClass() == 'select'
				this.selectDate[this.selZhuanIndex] = [];
				if (!isSelect) {
					const groups = this.majorData[this.selZhuanIndex]
					groups.majors.forEach(info => {
						this.selectDate[this.selZhuanIndex].push(info)
					})
				}
			},
			// 点击重置
			onClickReset() {
				this.selBenIndex = -1;
				this.selZhuanIndex = -1;
				this.selGroupIndex = -1;
				this.selectData = {};
				this.selectDate = {}
				this.selectBen = false;
				uni.removeStorageSync('selectData')
				uni.setStorageSync('selectData', {})
			},
			// 点击确定
			onClickStartFilter() {
				// 保存之前先存储一次
				uni.setStorageSync('selectData', this.selectData)
				this.selectBen = true;

				let selectData = this.selectData;
				let selectDate = this.selectDate
				// 创建一个新对象用于存储合并后的结果
				let mergedObject = {};
				// 记录当前新对象的键
				let currentIndex = 0;
				// 遍历对象a，将其值添加到mergedObject中
				for (let key in selectData) {
					if (selectData.hasOwnProperty(key)) {
						mergedObject[currentIndex] = selectData[key];
						currentIndex++;
					}
				}
				// 遍历对象b，将其值添加到mergedObject中
				for (let key in selectDate) {
					if (selectDate.hasOwnProperty(key)) {
						mergedObject[currentIndex] = selectDate[key];
						currentIndex++;
					}
				}


				this.$emit("onClickStartFilter", mergedObject)

				// return
				// this.$emit("onClickStartFilter", this.selectData)
				this.profession = 0 // 重置专科和本科选中的状态
				this.$emit("seleteArr", this.selectData)
				if (this.seleindex.length > 0) {
					this.$emit("seleindex", this.seleindex)
				}
				if (this.seleindexx.length > 0) {
					this.$emit("seleindexx", this.seleindexx)
				}
			},
			// 获取筛选项选中样式
			getSelectClass(item) {
				if (this.profession == 0) {
					if (!this.selectData[this.selGroupIndex]) {
						return ''
					} else {
						return this.selectData[this.selGroupIndex].some(i => i.code == item.code) ? 'select' : ''
					}
				} else {
					if (!this.selectDate[this.selZhuanIndex]) {
						return ''
					} else {
						return this.selectDate[this.selZhuanIndex].some(i => i.code == item.code) ? 'select' : ''
					}
				}

			},
			// 获取全部cell选中样式
			getAllCellSelectClass() {
				if (this.profession == 0) {
					if (this.selGroupIndex == -1) {
						return 'select'
					} else if (!this.selectData[this.selGroupIndex]) {
						return ''
					} else {
						let isAll = true
						// const groups = this.data[this.selGroupIndex]
						const groups = this.majorData[this.selGroupIndex]
						groups.majors.forEach(info => {
							if (isAll) {
								isAll = this.selectData[this.selGroupIndex].some(i => i.code == info.code)
							}
						})

						return isAll ? 'select' : ''
					}
				} else {

					return this.getAllCellSelectZhuanClass()
				}

			},
			getAllCellSelectZhuanClass() {
				if (this.selZhuanIndex == -1) {
					return 'select'
				} else if (!this.selectDate[this.selZhuanIndex]) {
					return ''
				} else {
					let isAll = true
					// const groups = this.data[this.selGroupIndex]
					const groups = this.majorData[this.selZhuanIndex]
					groups.majors.forEach(info => {
						if (isAll) {
							isAll = this.selectDate[this.selZhuanIndex].some(i => i.code == info.code)
						}
					})

					return isAll ? 'select' : ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	view {
		/* background-color: #f8f8f8; */
	}

	.sortList-left-list {
		::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
			color: transparent;
		}
	}

	.sortList-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.flex-row {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.sortList-right {
		.flex-row {
			display: flex;
			justify-content: space-between;
		}
	}

	.tree {
		display: flex;
		flex-direction: row;
	}

	.item-s {
		background-image: url("https://mcdn.chatgk.com/xcx/static/images/icon/kuang.png");
		background-size: 176rpx 64rpx;
		color: #ed302e;
	}

	.container-items {
		display: flex;
		flex-wrap: wrap;
		margin-left: 30rpx;
		/* margin-right: 40rpx; */
	}

	.item-ss {
		background-size: 176rpx 64rpx;
		color: #ed302e;
		border: 0.5rpx solid #ed302e;
	}

	.item-n {
		width: 176rpx;
		min-height: 64rpx;
		background-color: #ebebeb;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #464646;
		font-weight: bold;
		margin: 0 2rpx 20rpx 40rpx;
		line-height: 64rpx;
	}

	.title {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 35rpx;
		margin-bottom: 20rpx;
		margin-left: 32rpx;

	}

	.container {
		height: 100vh;
		width: 100vw;
		/* border-radius: 100rpx 100rpx 0 0; */
		background-color: rgba(0, 0, 0, 0.6);
	}

	.erji {
		border-radius: 50rpx 50rpx 0 0;
		width: 100vw;
		position: absolute;
		bottom: 0;
		overflow: hidden;
	}

	.view-list-group {
		width: 100%;
	}

	.view-list-value {
		width: 100%;
		background-color: #fff;
	}

	.text-group {
		color: #464646;
		font-size: 26rpx;
		width: 250rpx;
		/* height: 75rpx;
		line-height: 75rpx; */
		padding: 15rpx 20rpx;
		text-align: center;
		background-color: #f8f8f8;
		border-bottom: #fff solid 2rpx;
	}

	.text-group.select {
		background-color: #fff;
		color: #FF3B0A;
	}

	.text-value {
		background-color: #fff;
		color: #464646;
		font-size: 26rpx;
		width: 100%;
		/* height: 75rpx;
		line-height: 75rpx; */
		padding: 15rpx 30rpx 15rpx 56rpx;
		border-bottom: #f8f8f8 solid 2rpx;
	}

	.text-value.select {
		color: #FF3B0A;
	}

	.container-button {
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 160rpx;

	}

	.button {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 38rpx;
	}

	.button.reset {
		color: #FF3B0A;
		background-color: white;
		border: #FF3B0A 2rpx solid;
	}

	.button.ok {
		color: #FFF;
		background: #FF3B0A;
	}

	.zhuanben {
		width: 200rpx;
		height: 100%;
		font-size: 24rpx;
		color: #999;


	}

	.slectzhuanben {
		color: #333333;
		position: relative;
	}

	.slectzhuanben::after {
		content: '';
		width: 6rpx;
		height: 20rpx;
		background-color: #FF3B0A;
		position: absolute;
		left: 0;
		top: 5rpx;
	}
</style>